<template>
  <el-dialog
    :title="form.id ? lang.t('common.update') : lang.t('common.create')"
    v-model="show"
    :width="700"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
      <el-tabs>
        <el-tab-pane :label="plugin.lang('form.tab.0')" name="0">
          <el-form-item :label="plugin.lang('form.name')" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="plugin.lang('form.code')" prop="code">
                <el-input v-model="form.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="plugin.lang('form.phone')" prop="phone">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="plugin.lang('form.email')">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane :label="plugin.lang('form.tab.1')" name="1">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="plugin.lang('form.country')">
                <div style="width: 100%; overflow: hidden">
                  <el-select v-model="form.country" style="width: 100%">
                    <el-option label="" value="" />
                    <el-option v-for="item in countryModel.getList()" :value="item.name" :label="item.name" :key="item.id"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="plugin.lang('form.city')">
                <el-input v-model="form.city"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="plugin.lang('form.area')">
                <el-input v-model="form.area"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item :label="plugin.lang('form.address')">
                <el-input v-model="form.address"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="plugin.lang('form.zip')">
                <el-input v-model="form.zip"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item :label="plugin.lang('form.tax')">
            <el-input v-model="form.tax"></el-input>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item :label="plugin.lang('form.bank')">
                <el-input v-model="form.bank"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="plugin.lang('form.bank_name')">
                <el-input v-model="form.bank_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="plugin.lang('form.bank_user')">
                <el-input v-model="form.bank_user"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="onUpdate">{{ form.id ? lang.t('common.update') : lang.t('common.create') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref } from 'vue'
import app from '@/app'
import model from '../model'
import countryModel from '@/model/country'

export default {
  setup() {
    // 对话框
    const show = ref(false)

    // 表单
    const formRef = ref(null)
    const form = ref({})

    // 验证
    const rules = {
      name: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      code: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: ' ', trigger: 'blur' }
      ]
    }

    // 打开
    const open = data => {
      form.value = Object.assign({}, data)
      show.value = true
    }

    // 更新
    const loading = ref(false)
    const onUpdate = () => {
      formRef.value.validate(valid => {
        if (valid) {
          loading.value = true
          model.update(form.value).then(() => {
            show.value = false
          }).finally(() => {
            loading.value = false
          })
        }
      })
    }

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      show,
      open,
      formRef,
      form,
      rules,
      loading,
      onUpdate,
      countryModel
    }
  }
}
</script>